<template>
	<div class="history-page">
		<svg t="1745488513487" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5681" width="40" height="40"><path d="M512 42.666667c259.2 0 469.333333 210.133333 469.333333 469.333333s-210.133333 469.333333-469.333333 469.333333S42.666667 771.2 42.666667 512 252.8 42.666667 512 42.666667z m0 85.333333a384 384 0 1 0 0 768 384 384 0 0 0 0-768z m0 128a42.666667 42.666667 0 0 1 42.368 37.674667L554.666667 298.666667v215.637333l140.202666 125.824a42.666667 42.666667 0 0 1 6.570667 56.021333l-3.328 4.224a42.666667 42.666667 0 0 1-56.021333 6.570667l-4.224-3.328-154.368-138.538667a42.666667 42.666667 0 0 1-13.866667-26.581333L469.333333 533.333333V298.666667a42.666667 42.666667 0 0 1 42.666667-42.666667z" fill="#1296db" p-id="5682"></path></svg>
        <div class="userCenter_title">{{$t('WatchHistory')}}</div>

		<div class="history-list">
			<div class="item" v-for="item in historyLog" :key="item.id" @click="toPage('/home/SandSculptureMain?id='+item.theater_id)">
				<div class="img_box">
					<img :src="$baseUrl + item.theater_img" class="thumb" mode="aspectFill" />+
					<div class="episode">全{{item.sum_episode}}集</div>
				</div>
				<div class="title">{{ item.theater_name }}</div>
				<div class="time">觀看至第{{item.theater_progress}}集：{{ formatDuration(item.episode_progress) }}</div>
				
			</div>
		</div>

		<p @click="toPage('/home/SandSculpture')" class="isNull" v-if="historyLog.length == 0">您還沒有任何觀看歷史，點此去觀看！</p>
		<el-pagination 
			v-if="historyLog.length > 0"
			class="pagination"
			background 
			layout="prev, pager, next" 
			:total="totalRecords" 
			:page-size="limit" 
			:current-page="page" 
			@current-change="handlePageChange" 
		/>
	</div>
</template>

<script setup>
import axios from '@/utils/api'
import { useUserInfoStore } from '@/store/modules/user_info/index'
import { useRouter } from "vue-router";
const router = useRouter();

const user_infoStore = useUserInfoStore()
const user_info = reactive(user_infoStore.userInfo)

const historyLog = ref([])
const page = ref(1)
const limit = 10
const totalRecords = ref(0);
const getUserWatchLog = async () => {
	const res = await axios.get(`/userWatchLog?user_id=${user_info.id}&page=${page.value}&limit=${limit}`)
	if (res.code === 200) {
		historyLog.value = res.data.data
		totalRecords.value = res.data.total; 
	}
}

function formatDuration(time) {
  const minutes = Math.floor(time / 60)
  const seconds = Math.floor(time % 60)
  return `${minutes}:${seconds.toString().padStart(2, '0')}`
}


getUserWatchLog()

const toPage = (url) => {
	router.push(url)
}

const handlePageChange = (newPage) => {
    page.value = newPage;
    getUserWatchLog();
};
</script>

<style lang="less" scoped>
.pagination{
    display: flex;
    justify-content: end;
    width: 100%;
    margin-top: 20px;
}
.header {
	position: relative;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #000;
	font-size: 18px;
	font-weight: bold;
	border-bottom: 1px solid #eee;
	background-color: #fff;

	.fanhui {
		position: absolute;
		left: 10px;
		top: 10px;
		z-index: 10;
	}
}

.history-list {
	margin-top: 15px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	.item {
		display: flex;
		background-color: #fff;
		margin-bottom: 2px;
		overflow: hidden;
		width: 99%;
		flex-direction: column;
		margin-bottom: 10px;
		position: relative;
		// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		.img_box{
			overflow: hidden;
			width: 100%;
			border-radius: 10px;
			display: flex;
			cursor: pointer;
			position: relative;
			img{
				width: 100%;
				border-radius: 10px;
				transition: all .3s;
			}
			img:hover{
				transform: scale(1.05);
			}
			.episode {
				color: white;
				position: absolute;
				bottom: 7px;
				right: 5px;
				font-weight: bold;
				font-size: 12px;
				filter: drop-shadow(2px 4px 6px black);
			}
		}
		
		.thumb {
			// width: 120px;
			aspect-ratio: 0.79 / 1;
			object-fit: cover;
		}
		
		.time {
			font-size: 13px;
			color: #808080;
			margin-left: 0;
			margin-top: 5px;
			margin-left: 5px;
		}
		.title {
			font-size: 16px;
			font-weight: bold;
			color: #333;
			margin-top: 5px;
			margin-left: 5px;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			line-height: 21px;
			max-height: 44px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: normal;
			word-break: break-all;
			display: -webkit-box;
		}
	}
}

.empty {
	text-align: center;
	padding: 40px 0;
	color: #aaa;
	font-size: 14px;
}

</style>
